<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card shadow="hover" class="mgb20" style="height:220px;">
                    <div class="user-info">
                        <img :src="imgsrc" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        上次登录时间：
                        <span>{{lastLoginTime}}</span>
                    </div>
                </el-card>
                <el-card shadow="hover" class="mgb20" style="height:220px;">
                    <el-button type="primary" round style="height:180px;width: 350px">
                        <el-card shadow="hover":body-style="{padding: '40px'}" style="height:160px;background-color: #d1e0e0">
                            <div class="grid-content grid-con-1" v-on:click="redirectAssess">
                                <i class="el-icon-lx-calendar grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{assessmentNumber}}</div>
                                    <div>康复评估</div>
                                </div>
                            </div>
                        </el-card>
                    </el-button>
                </el-card>
                <el-card shadow="hover" class="mgb20" style="height:220px;" >
                    <el-button type="primary" round style="height:180px;width: 350px">
                        <el-card shadow="hover":body-style="{padding: '50px'}" style="height:160px;;background-color: #d1e0e0">
                            <div class="grid-content grid-con-2" v-on:click="redirectPrescription">
                                <i class="el-icon-lx-read grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{prescriptionNumber}}</div>
                                    <div>康复处方</div>
                                </div>
                            </div>
                        </el-card>
                    </el-button>
                </el-card>
                <el-card shadow="hover" class="mgb20" style="height:220px;">
                    <el-button type="primary" round style="height:180px;width: 350px">
                        <el-card shadow="hover":body-style="{padding: '50px'}" style="height:160px;;background-color: #d1e0e0">
                            <div class="grid-content grid-con-3" v-on:click="redirectTrain">
                                <i class="el-icon-football grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{trainNumber}}</div>
                                    <div>康复训练</div>
                                </div>
                            </div>
                        </el-card>
                    </el-button>
                </el-card>
            </el-col>
            <el-col :span="9">
                <el-card shadow="hover" style="height:460px;">
                    <div slot="header" class="clearfix">
                        <span>今日预约列表</span>
                    </div>
                    <el-table :data="todaylist" style="width:100%;" height="380">
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="预约时间">
                        </el-table-column>
                        <el-table-column
                                prop="preId"
                                label="处方ID">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="9">
                <el-card shadow="hover" style="height:460px;">
                    <div slot="header" class="clearfix">
                        <span>一周内康复处方信息</span>
                    </div>
                    <el-table  :data="weekList" style="width:100%;" height="380">
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="开具时间">
                        </el-table-column>
                        <el-table-column
                                prop="preTherape"
                                label="治疗师">
                        </el-table-column>
                    </el-table>
                </el-card>

            </el-col>
            <el-col :span="18" style="padding-top: 22px;">
                <el-card shadow="hover" class="mgb20" style="height:460px;">
                    <div slot="header" class="clearfix">
                        <span>各年龄段的患者比例</span>
                    </div>老年(66以后)
                    <el-progress :text-inside="true" :stroke-width="20"  :percentage="oldNumber"  color="#42b983"></el-progress>中年(41~65)
                    <el-progress :text-inside="true" :stroke-width="20"  :percentage="mNumber" color="#f1e05a"></el-progress>青年(18-40)
                    <el-progress :text-inside="true" :stroke-width="20"  :percentage="yNumber" ></el-progress>少年(7~17)
                    <el-progress :text-inside="true" :stroke-width="20"  :percentage="sNumber"  color="#f56c6c"></el-progress>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../../common/bus';
import {getFirstData} from "../../../api/firstpage";
export default {
    name: 'dashboard',
    data() {
        return {
            query:{
                userAcct:localStorage.getItem('ms_userAcct')
            },
            name: localStorage.getItem('ms_userNm'),
            roleIds: localStorage.getItem('ms_roleIds'),
            assessmentNumber:0 ,
            prescriptionNumber: 0,
            trainNumber: 0,
            //上次登录的时间
            lastLoginTime:localStorage.getItem('ms_lastLoginTm'),
            //老年
            oldNumber:0,
            //中年
            mNumber:0,
            //青年
            yNumber:0,
            //少年
            sNumber:0,
            todaylist: [],
            weekList: [],
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            let roleIds = this.roleIds;
            if (roleIds !== null){
                if (roleIds.indexOf("system") != -1){
                    return '超级管理员';
                } else if (roleIds.indexOf("physician") != -1){
                    return '医师';
                } else if (roleIds.indexOf("therapeutist") != -1){
                    return '治疗师';
                }
            } else {
                return localStorage.getItem('ms_userAcct') == 'admin' ? '超级管理员' : '普通用户';
            }
        },
        imgsrc() {
            let imgtp = localStorage.getItem('ms_imgTp');
            let imgdata = localStorage.getItem('ms_imgData');
            if (imgtp != 'null' && imgdata != 'null' && imgtp != "" && imgdata != ""){
                return 'data:image/'+ imgtp +';base64,' + imgdata;
            } else {
                return require("@/assets/img/user_img.gif");
            }
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            console.log("进入首页----",this.query);
            getFirstData(this.query).then(res => {
                this.assessmentNumber = res.data.assessmentNumber;
                this.prescriptionNumber = res.data.prescriptionNumber;
                this.trainNumber = res.data.trainNumber;
                this.oldNumber = res.data.oldNumber;
                this.mNumber = res.data.mmNumber;
                this.yNumber = res.data.ymNumber;
                this.sNumber = res.data.smNumber;
                this.todaylist = res.data.todaylist;
                this.weekList = res.data.weekList;
            });
        },
        //跳转到康复处方
        redirectPrescription(){
            console.log("进入了redirectPrescription---------");
            this.$router.replace(('/prescription'));
        },
        //跳转到康复评估
        redirectAssess(){
            console.log("redirectAssess---------");
            this.$router.replace(('/assess'));
        },
        //跳转到康复训练
        redirectTrain(){
            console.log("redirectTrain---------");
            this.$router.replace(('/train'));
        },
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 18px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 60px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(81, 182, 204);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(159, 207, 132);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(234, 151, 72);
}

.grid-con-3 .grid-num {
    color: rgb(145, 242, 234);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
